body {
  background: #fff;
  padding-bottom: 55px;
  /* padding-top: 40px; */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.topBar{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333333;
    display: flex;
    text-align: center;
}
.topBar .container{
  width: 85%;
  margin: 0 auto;
  display: flex;
  position: relative;
}
.topBar .container .topBar_list ul{
  list-style-type: none;
  display: flex;
}
.topBar .container .topBar_list ul li{
  
  color: #a4a484;
  font-size: 12px;
}
.topBar .container .topBar_list ul li:hover{
  color: #fff;
}
.topBar .container .topBar_list ul span{
  color: #3f423c;
  font-size: 8px;
  margin: 0 8px; 
  padding: 0;
}

.topBar .container .login ul{
  list-style-type: none;
  display: flex;
  position: absolute;
  right: 10%;
}
.topBar .container .login ul li{
  color: #a4a484;
  font-size: 12px;
}
.topBar .container .login ul span{
  color: #3f423c;
  font-size: 8px;
  margin: 0;
  padding: 0;
  margin: 0 8px; 
}
.topBar .container .login ul li:hover{
  color: #fff;
}
.topBar .container .shopCar{
  display: flex;
  position: absolute;
  right: 0;
  background-color: #424242;
  padding: 0 20px;
}
.topBar .container .shopCar:hover{
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ccc;
  border-bottom: none;
}
.topBar .container .shopCar:hover .dropdown{
  display: block;
  z-index: 10;
}
.topBar .container .shopCar .dropdown{
  /* background-color: pink ; */
  background-color: #fff ;
  width: 316px;
  height: 100px;
  line-height: 100px;
  display: none;
  border: 1px solid #ccc;
  z-index: -1;
  position: absolute;
  top: 39px;
  right: -2px;
}
.topBar .container .shopCar .dropdown span{
  margin: auto auto;
  color: black;
  font-size: 16px;
}
.topBar .container .shopCar i{
  color: #b0b0b0;
}
.topBar .container .shopCar span{
  margin: 0;
  padding:0;
  color: #a4a484;
  font-size: 12px;
}
.header{
  width: 100%;
  line-height: 100px;
  background-color: #fff;
}
.header .container{
  width: 85%;
  margin: 0 auto;
  display: flex;
  position: relative;
}
.header .container  .pic{
  margin: auto 0;
  width: 55px;
  height: 55px;
  line-height: 55px;
  background-color: #ff6700;
}

.header .container  .pic img{
  width: 100%;
  height: 100%;
}
.mouseover{
  animation:myfirst 2s;
  -webkit-animation:myfirst 2s; /* Safari and Chrome */
}
.mouseout{
  animation:mylast 2s;
  -webkit-animation:mylast 2s; /* Safari and Chrome */
}
@keyframes myfirst
{
  0%{ opacity: 50%;}
  100% {opacity: 100%;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0%{ opacity: 50%;}
  100% {opacity: 100%;}
}
@keyframes mylast
{
  0%{ opacity: 50%;}
  100% {opacity: 100%;}
}
@-webkit-keyframes mylast /* Safari and Chrome */
{
  0%{opacity: 50%;}
  100% {opacity: 100%;}
}
.header .container .title{
  margin: auto 0;
  text-align: center;
  position: relative;
  left: 13%;
  font-size: 14px;
}
.header .container .title ul{
  display: flex;
}
.header .headerbox .slide{
  position: absolute;
  width: 100%;
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-size: 50px;
  color: pink;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  z-index: 1;
  display: none;
}
.header .container .title ul li{
  margin: 0 15px;
}
.header .container .box{
  width: 300px;
  height: 54px;
  line-height: 54px;
  border: 2px solid #e0e0e0;
  display: flex;
  position: absolute;
  top: 23px;
  right: 0;
  margin: auto 0;
}
.header .container .box .search{
  border: none;
  outline:none;
}
.header .container .box .search input{
  width: 250px;
  height: 50px;
  line-height: 50px;
  border: 0px;
  outline:none;
  font-size: 16px;
}
.header .container .box .search .dropdown{
  width: 250px;
  height: 200px;
  z-index: 10;
  background-color: #fff;
  display: none;
  border-top: none;
  border: 2px solid #ff6700;
  position: absolute;
  left: -2px;

}
.header .container .box .sousuo{
  width: 50px;
  height: 54px;
  line-height: 54px;
  /* margin: auto 0; */
  border-left: 2px solid #e0e0e0;
  text-align: center;
  outline:none;
} 
.header .container .box  .sousuo:hover{
  background-color:#ff6700 ;
  color: #fff;
  border-left: 2px solid #ff6700;
}
.header .container .box .sousuo .iconfont{
    font-size: 20px;
}
.site-content{
  width: 85%;
  /* height: 800px; */
  margin: 0 auto;
  padding-bottom: 30px;
}
.site-content .container {
  width: 100%;
  height: 460px;
  margin: 0 auto;
}
.site-content .container .slideBox .nav{
  width: 240px;
  height: 460px;
  position: absolute;
  left: 0;
  background-color: #9f9a96;
  opacity: 0.8;
  overflow:hidden;
  display: flex;
}
.site-content .container .slideBox .nav ul{
  height: 460px;
  line-height: 460px;
  padding: 20px 0;
  box-sizing: border-box;
  overflow:hidden;
  font-weight: 500;
  color: #fff;
}
.site-content .container .slideBox .nav ul li{
  height: 42px;
  width: 240px;
  line-height: 42px;
  font-size: 14px;
  padding-left: 20px;
  box-sizing: border-box;
}
.site-content .container .slideBox .nav ul li .iconfont{
  position: absolute;
  right: 20px;
}

.slideBox{ width:100%; height:460px; overflow:hidden; position:relative;left: -3px; border:1px solid #ddd; display: flex; }
		.slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
		.slideBox .hd ul{ overflow:hidden; zoom:1; float:left;;}
		.slideBox .hd ul li{ float:left; margin-right:5px;  width:10px; height:10px; line-height:10px; text-align:center; background: #4e5a63;
  border-radius: 50%; }
		.slideBox .hd ul li.on{ background-color: #b88767;}
		.slideBox .bd{ position:relative; height:100%; z-index:0;   }
		.slideBox .bd li{ zoom:1; vertical-align:middle;}
		.slideBox .bd img{ width:100%; height:460px; display:block;  }

		/* 下面是前/后按钮代码，如果不需要删除即可 */
		.slideBox .prev,
		.slideBox .next{ position:absolute; left:21%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(../pic/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }
		.slideBox .next{ left:auto; right:2%; background-position:8px 5px; }
		.slideBox .prev:hover,
		.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
		.slideBox .prevStop{ display:none;  }
		.slideBox .nextStop{ display:none;  }

.site-content .contain-sub{
  width: 100%;
  height: 160px;
  margin-top: 10px;
  position: relative;
  left: -3px;     
  overflow: hidden;
  display: flex;
}
.site-content .contain-sub .contain-channel{
  width: 240px;
  height: 160px;
  list-style: none;
  background-color: #5f5750;
  overflow: hidden;
}
.site-content .contain-sub .contain-channel li{
  width: 80px;
  height: 80px;
  padding: 3px;
  margin-bottom: 2px;
  box-sizing: border-box;
  float: left;
  display: block;
  border-right: solid #857671 1px;
  border-bottom: solid #857671 1px;
  position: relative;
  font-size: 12px;
  text-align: center;
  color: white;
}
.site-content .contain-sub .contain-channel li img{
  width: 24px;
  height: 24px;
  position: absolute;
  top: 14px;
  left: 28px;
}
.site-content .contain-sub .contain-banner{
  display: flex;
  overflow: hidden;
  position: relative;
  left: 3px;
}
.site-content .contain-sub .contain-banner>div{
  width: 320px;
  height: 160px;
  margin-left: 30px;
}
.site-content .contain-sub .contain-banner >div img{
  width: 100%;
  height: 100%;
}
.content-detail{
  background-color: #f5f5f5;
  width: 100%;
  height: 1000px;
}
#star>div>h2{font-size:22px;font-weight:200;line-height:58px;} 
#star>div>p{width:72px;height:27px;
background:url(../pic/background.png) no-repeat -71px 0; }
#star {border:1px solid #fff;width: 100%;height:424px;float:left;background:#fff;}
#star dl{width:228px;height:300px;text-align:center;margin-right:21px;float:left;
	border-top:1px solid #333;padding-top:56px;background:#F5F5F5;}
#star dl>dt>a>img{width:160px;height:160px;}
#star dl dd.Ltc{color:#FF6A0A;padding:16px;}
#star dl dd h4{padding:5px 0;}
#star div.star_dl{float:left;height:300px;}
#star div.star_dl dl:nth-child(5){margin-right:0;}
/**设置dl上面的边框颜色**/
#star div.star_dl dl.s1{border-top-color:#FDCF7A;}
#star div.star_dl dl.s2{border-top-color:#B8DC9B;}
#star div.star_dl dl.s3{border-top-color:#37A0F4;}
#star div.star_dl dl.s4{border-top-color:#E74D49;}
#star div.star_dl dl.s5{border-top-color:#41D0BC;}

.goods{
    width: 85%;
    margin: 0 auto;
    background-color: #f5f5f5;
}
.goods .title{
   height: 58px;
   line-height: 58px;
   font-size: 20px;
   color: #333339;
   margin-left: 5px;
   color: #33336b;
}
.goods .buy-box{
    width: 100%;
    display: flex;
}
.goods .buy-box li{
    width: 250px;
    height: 340px;
    margin-right: 10px;
    background-color: #fff;
}
.goods .buy-box li .top{
    width: 100%;
    height: 0px;
    border-top: pink 1px solid;
    border-bottom: pink 1px solid;
}
.goods .buy-box li{
text-align: center;
background-color: #fff;
}
.goods .buy-box li:first-child{
    background-color: #f1eded;
}
.goods .buy-box li:first-child>div{
    font-size: 20px;
    height: 80px;
    line-height: 80px;
}
.goods .buy-box li:first-child img{
    width: 80px;
}
.goods .buy-box li:first-child .se-count{
    margin: 0;
    padding: 0;
}
.goods .buy-box li:first-child .se-count>div{
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #010101;
    color: #f1eded;
    display: inline-block;
}
.goods .buy-box li .goodItem .pic{
    width: 150px;
    margin: 30px auto;
    
}
.goods .buy-box li .goodItem .pic img{
    width: 100%;
    height: 100%;
}
.goods .buy-box li .goodItem>div{
    height: 30px;
    line-height: 30px;
}
.goods .buy-box li .goodItem .good_name{
    font-size: 18px;
    font-weight: 500;
}
.goods .buy-box li .goodItem .good_description{
    font-size: 12px;
    color: #bcbcbc;
    
}
.goods .buy-box li .goodItem .good_price .new_price{
    color: tomato;
    margin-right: 5px;
}
.goods .buy-box li .goodItem .good_price .old_price{
    color: thistle;
    text-decoration: line-through;
}
.goods .buy-box li:last-child{
    margin-right: 0px;
}

.footer{
    width: 100px;
    background-color: #ffffff;
  }